<template>
  <div class="test-record-wrapper">
    <!-- 顶部标签页导航 -->
    <div class="tab-navigation">
      <div class="tab-item active">
        <span>Characteristic Test Record</span>
      </div>
      <div class="tab-item">
        <span>Voltage Drop Test Record</span>
      </div>
      <div class="tab-item">
        <span>Anti-pumping Test Record</span>
      </div>
      <div class="power-button">
        <AButton type="primary">
          <template #icon>
            <PoweroffOutlined />
          </template>
          Main Power&Emerg
        </AButton>
      </div>
    </div>

    <!-- 筛选和搜索区域 -->
    <div class="filter-section">
      <div class="filter-row">
        <div class="filter-item">
          <AInput v-model:value="filters.projectName" placeholder="project name..." allow-clear>
            <template #prefix>
              <SearchOutlined />
            </template>
          </AInput>
        </div>
        <div class="filter-item">
          <ASelect v-model:value="filters.project" placeholder="project" allow-clear style="width: 120px" />
        </div>
        <div class="filter-item">
          <ASelect v-model:value="filters.equipmentModel" placeholder="Equipment Model" allow-clear
            style="width: 140px" />
        </div>
        <div class="filter-item">
          <ASelect v-model:value="filters.operations" placeholder="Number of Operations" allow-clear
            style="width: 160px" />
        </div>
        <div class="filter-item">
          <ASelect v-model:value="filters.operationType" placeholder="Operation Type" allow-clear
            style="width: 130px" />
        </div>
        <div class="filter-item">
          <ADatePicker v-model:value="filters.testDate" placeholder="Test Date&time" show-time style="width: 160px" />
        </div>
        <div class="table-info">
          <span>{{ paginationInfo }}</span>
        </div>
        <div class="action-buttons">
          <AButton @click="handleImport">
            <template #icon>
              <PlusCircleFilled class="icon-plus"/>
            </template>
            import
          </AButton>
          <AButton @click="handleExport">
            <template #icon>
              <img src="../../icones/export.png" alt="export" class="icon-plus" style="margin-right: 4px;"/>
            </template>
            Export
          </AButton>
        </div>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="table-section">
      <ATable :columns="columns" :data-source="tableData" :pagination="false" :scroll="{ x: 1500 }" size="middle"
        bordered>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'selection'">
            <ACheckbox v-model:checked="record.selected" @change="handleSelect" />
          </template>
          <template v-else-if="column.key === 'testTime'">
            <span>{{ record.testTime }}</span>
            <CaretUpOutlined class="sort-icon" />
          </template>
        </template>
        <template #headerCell="{ column }">
          <template v-if="column.key === 'selection'">
            <ACheckbox v-model:checked="selectAll" @change="handleSelectAll" />
          </template>
        </template>
      </ATable>
    </div>

    <!-- 导出数据弹窗 -->
    <AModal v-model:open="exportModalVisible" title="Export Data" :footer="null" width="800px" :closable="true"
      @cancel="closeExportModal">
      <div class="export-modal-content">
        <!-- 描述文字 -->
        <div class="export-description">
          Export selected text data, with the option to attach test photos.
        </div>

        <!-- 照片上传区域 -->
        <div class="photo-section">
          <div class="photo-upload-area">
            <AUpload :custom-request="() => { }" :show-upload-list="false" accept=".png,.jpg,.jpeg"
              @change="handlePhotoUpload">
              <div class="upload-box">
                <CloudUploadOutlined class="upload-icon" />
                <div class="upload-text">.png .jpg .jpeg</div>
              </div>
            </AUpload>
          </div>
          <div class="photo-thumbnails">
            <div class="photo-thumbnail" v-for="(photo, index) in exportForm.photos" :key="index">
              <a-image :width="150" :src="photo" />
            </div>
          </div>
        </div>

        <!-- 测试结论区域 -->
        <div class="test-conclusion-section">
          <div class="section-title">Test Conclusion</div>
          <ATextarea v-model:value="exportForm.testConclusion" placeholder="Please enter the test conclusion" :rows="4"
            class="conclusion-textarea" />
        </div>

        <!-- 导出设置区域 -->
        <div class="export-settings-section">
          <div class="settings-row">
            <div class="setting-item">
              <div class="setting-label">Project Name</div>
              <div class="input-with-button">
                <AInput v-model:value="exportForm.templateSelection" />
              </div>
            </div>
            <div class="setting-item">
              <div class="setting-label">Template Selection</div>
              <div class="input-with-button">
                <AInput v-model:value="exportForm.templateSelection" />
              </div>
            </div>
          </div>
          <div class="settings-row">
            <div class="setting-item">
              <div class="setting-label">Storage Format</div>
              <div class="input-with-button">
                <AInput v-model:value="exportForm.storageFormat" />
              </div>
            </div>
            <div class="setting-item">
              <div class="setting-label">Storage Path</div>
              <div class="input-with-button">
                <AInput v-model:value="exportForm.storagePath" />
              </div>
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="export-actions">
          <AButton @click="closeExportModal" class="cancel-button">
            Cancel
          </AButton>
          <AButton type="primary" @click="saveExport" class="save-button">
            Save
          </AButton>
        </div>
      </div>
    </AModal>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import {
  PoweroffOutlined,
  SearchOutlined,
  PlusCircleFilled,
  ArrowUpOutlined,
  CaretUpOutlined,
  CloudUploadOutlined
} from '@ant-design/icons-vue'
import './index.scss'

// 组件配置
defineOptions({
  name: 'TestRecord',
  path: '/test-record',
  async: true
})

// 筛选条件
const filters = reactive({
  projectName: '',
  project: undefined,
  equipmentModel: undefined,
  operations: undefined,
  operationType: undefined,
  testDate: null
})

// 分页信息
const paginationInfo = ref('1-100 / 100')

// 全选状态
const selectAll = ref(false)

// 表格列定义
const columns = [
  {
    title: 'selection',
    key: 'selection',
    width: 50,
    fixed: 'left'
  },
  {
    title: 'No.',
    dataIndex: 'no',
    key: 'no',
    width: 80,
    fixed: 'left'
  },
  {
    title: 'Serial Number',
    dataIndex: 'serialNumber',
    key: 'serialNumber',
    width: 120,
    fixed: 'left'
  },
  {
    title: 'Project Name',
    dataIndex: 'projectName',
    key: 'projectName',
    width: 150
  },
  {
    title: 'Data',
    dataIndex: 'data',
    key: 'data',
    width: 150
  },
  {
    title: 'Test Time',
    dataIndex: 'testTime',
    key: 'testTime',
    width: 180,
    sorter: true
  },
  {
    title: 'Switchgear Model',
    dataIndex: 'switchgearModel',
    key: 'switchgearModel',
    width: 140
  },
  {
    title: 'Switchgear manufacturer',
    dataIndex: 'switchgearManufacturer',
    key: 'switchgearManufacturer',
    width: 160
  },
  {
    title: 'Number of Operations',
    dataIndex: 'operations',
    key: 'operations',
    width: 150
  },
  {
    title: 'Operation Type',
    dataIndex: 'operationType',
    key: 'operationType',
    width: 120
  },
  {
    title: 'Opening Time (ms)',
    dataIndex: 'openingTime',
    key: 'openingTime',
    width: 140
  },
  {
    title: 'Closing Time (ms)',
    dataIndex: 'closingTime',
    key: 'closingTime',
    width: 140
  },
  {
    title: 'Closing Speed(m/s)',
    dataIndex: 'closingSpeed',
    key: 'closingSpeed',
    width: 150
  },
  {
    title: 'Opening Speed(m/s)',
    dataIndex: 'openingSpeed',
    key: 'openingSpeed',
    width: 150
  },
  {
    title: 'Stroke',
    dataIndex: 'stroke',
    key: 'stroke',
    width: 100
  }
]

// 表格数据
const tableData = ref([
  {
    key: '1',
    no: 123,
    serialNumber: 123,
    projectName: 'Project Name',
    data: '8VM1, CB 100%, C1',
    testTime: '2025.06.11 12:00:00',
    switchgearModel: '8VM1',
    switchgearManufacturer: 'Circuit Breaker',
    operations: 1000,
    operationType: 'closing',
    openingTime: '/',
    closingTime: 67,
    closingSpeed: '/',
    openingSpeed: 5.2,
    stroke: 6.8,
    selected: false
  },
  {
    key: '2',
    no: 123,
    serialNumber: 123,
    projectName: 'Project Name',
    data: '8VM1, CB 100%, C1',
    testTime: '2025.06.11 12:00:00',
    switchgearModel: '8VM1',
    switchgearManufacturer: 'Circuit Breaker',
    operations: 1000,
    operationType: 'closing',
    openingTime: '/',
    closingTime: 67,
    closingSpeed: '/',
    openingSpeed: 5.2,
    stroke: 6.8,
    selected: false
  },
  {
    key: '3',
    no: 123,
    serialNumber: 123,
    projectName: 'Project Name',
    data: '8VM1, CB 100%, C1',
    testTime: '2025.06.11 12:00:00',
    switchgearModel: '8VM1',
    switchgearManufacturer: 'Circuit Breaker',
    operations: 1000,
    operationType: 'closing',
    openingTime: '/',
    closingTime: 67,
    closingSpeed: '/',
    openingSpeed: 5.2,
    stroke: 6.8,
    selected: false
  }
])

// 处理导入
const handleImport = () => {
  console.log('Import clicked')
}

// 导出弹窗相关状态
const exportModalVisible = ref(false)
const exportForm = reactive({
  projectName: 'macOS Library.sketch',
  templateSelection: 'Template2024.09.01',
  storageFormat: 'EXCEL',
  storagePath: 'Desktop',
  testConclusion: '',
  photos: ['https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png']
})

// 处理导出
const handleExport = () => {
  exportModalVisible.value = true
}

// 关闭导出弹窗
const closeExportModal = () => {
  exportModalVisible.value = false
}

// 保存导出设置
const saveExport = () => {
  console.log('Export settings:', exportForm)
  exportModalVisible.value = false
}

// 处理照片上传
const handlePhotoUpload = (info) => {
  if (info.file.status === 'done') {
    exportForm.photos.push(info.file.response.url)
  }
}

// 处理全选
const handleSelectAll = (e) => {
  const checked = e.target.checked
  selectAll.value = checked
  tableData.value.forEach(item => {
    item.selected = checked
  })
}

// 处理单个选择
const handleSelect = () => {
  const allSelected = tableData.value.every(item => item.selected)
  const someSelected = tableData.value.some(item => item.selected)

  if (allSelected) {
    selectAll.value = true
  } else if (someSelected) {
    selectAll.value = false
  } else {
    selectAll.value = false
  }
}
</script>
